{extend name="main"}
{block name="style"}
<style type="text/css">
	.job-fair-header{
		min-height: 600px;
		background-image: url(__TEMPLATE_STATIC__/job_fair_bg.jpg);
		background-repeat: no-repeat;
		background-position-x:center;
		background-size: auto 600px;
		background-color: #F8F8F8;
		padding-top: 500px;
	}
  .el-select .el-input {
    width: 120px;
  }
</style>
{/block}
{block name="header"}
{include file="module/top_nav" container="container-xl"/}
{include file="module/header_concise"/}
{/block}
{block name="body"}
<div class="job-fair-header">
	<div class="container-xl pt-2">
		<div class="text-center text-dark pb-5">
			<el-form @submit.native.prevent="sendSearch">
				<el-input placeholder="会计/财务/人力/客服/设计…" v-model="search.key" class="w-50 mb-3"
				clearable>
					<el-select slot="prepend" v-model="search.city" filterable clearable default-first-option placeholder="区域" style="">
						<el-option-group
					      v-for="group in city_list"
					      :key="group.title"
					      :label="group.title">
					      <el-option
					        v-for="item in group.data"
					        :key="item.id"
					        :label="item.title"
					        :value="item.id">
					      </el-option>
					    </el-option-group>
					</el-select>
				    <el-button native-type="submit" slot="append" icon="el-icon-search">搜索</el-button>
				</el-input>
			</el-form>
		</div>
		{xycms:jobfair name="jobfair"}
		<div class="row" style="margin-left: -0.5rem;margin-right: -0.5rem;">
		{volist name="jobfair" id="v"}
		<div class="col-6 mb-3 px-2">
			<div class="bg-white p-3 flex">
				<div>
					<img src="{$v.thumb}" alt="" width="85" height="85">
				</div>
				<div class="pl-3 flex-1">
					<a href="/job-fair/detail/{$v.id}.html" class="pb-1 d-block text-primary text-truncate"
					target="_blank">{$v.title}</a>
					<div class="text-secondary small">开始时间：{$v.start_time}</div>
					<div class="text-secondary small">结束时间：{$v.end_time}</div>
					{switch v.status}
					    {case 1 }
							<a href="/job-fair/detail/{$v.id}.html" class="pb-1 d-block text-success text-truncate"
							target="_blank">报名中<i class="el-icon-arrow-right"></i></a>
					    {/case}
					    {case 2}
							<a href="/job-fair/detail/{$v.id}.html" class="pb-1 d-block text-primary text-truncate"
							target="_blank">进行中<i class="el-icon-arrow-right"></i></a>
					    {/case}
					    {case 3}
							<a class="pb-1 d-block text-danger text-truncate">已结束</a>
					    {/case}
					    {default /}
							<a class="pb-1 d-block text-secondary text-truncate">未开始</a>
					{/switch}
				</div>
			</div>
		</div>
		{/volist}
		</div>
		<div class="text-center py-3">
			{$jobfair->render()|raw}
		</div>
		{else/}
		<div class="text-secondary text-center py-5">暂无招聘会</div>
		{/xycms:jobfair}
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/footer"/}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var city_list={xycms:citylist serialize="json"/};
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			loginTabs:XYBase.loginTabs,
			userInfo:UserInfo,
			feedback:XYBase.feedback,
			city_list:city_list,
			search:{
				city:{notempty name=":request()->get('city')"}{:request()->get('city')}{else/}''{/notempty},
				key:'{notempty name=":request()->get('title')"}{:request()->get('title')}{/notempty}'
			}
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			sendSearch(){
				window.location.href='?title='+this.search.key+'&city='+this.search.city;
			}
		})
	});
</script>
{/block}